<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: yinshankun
  Date: 2020/11/23
  Time: 11:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>政务服务-首页</title>
    <link href="<%=path%>/heatconfig/css/mui.min.css" rel="stylesheet" />
    <link href="<%=path%>/heatconfig/css/build.css" rel="stylesheet" type="text/css" />
    <script src="<%=path%>/heatconfig/js/mui.min.js"></script>
    <script type="text/javascript" src="<%=path%>/ysk/js/jquery-3.5.1.min.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <style type="text/css">
        .add6{
            margin-left: 500px;
        }
        .add7{
            margin-left: 600px;
        }


        #photo1{
            width: 80px;
            height: 80px;
            margin-left: 50px;
            margin-top: 20px;


        }
        .infomation{
            display: none;
            background-image: url("<%=path%>/ysk/images/bga.jpg");
        }
        #un{
            background-color: #FFFFFF;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,.15);
            position: relative;
            top: -40px;
            margin: 0 15px;
            padding: 5px 0 10px 0;
            overflow: hidden;

        }


        .address{
            display: none;
            background-image: url("<%=path%>/ysk/images/bga.jpg");
        }
        .time{
            display: none;
            background-image: url("<%=path%>/ysk/images/bga.jpg");
        }
        #aa{
            color: red;
        }
        #bb{

            color: #0000FF;
        }
        .result{
            display: none;
            background-image: url("<%=path%>/ysk/images/bga.jpg");
        }
        .pic{
            display: none;
            background-image: url("<%=path%>/ysk/images/bga.jpg");
        }


        #shouqi{
            float: right;
            margin-right: 50px;
            display: none;
        }
        .yuanyin{
            color: #0C0C0C;
            float: left;
            display: none;

        }
        .queding{
            margin-left: 500px;
            display: none;
        }

    </style>
</head>
<body>


<div class="mui-content">
    <div class="mui-control-content mui-active">
        <!-- 头部背景图  start -->
        <div class="banner-content bg_box">
            <img src="<%=path%>/heatconfig/images/huadian.jpg" width="100%" />
        </div>
        <div class="wait_handle">
            <a id="bb" href="<%=path%>/user/allrepairorder">待接单</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="aa" href="<%=path%>/user/ingorder">进行中</a>
        </div>
        <!-- 头部背景图  end -->
        <c:forEach items="${requestScope.orders}" var="orders" varStatus="num">
        <!-- 待办 start -->
        <div class="wait_handle">
            <input type="hidden" value=${orders.id}>
           <input class="yuanyin" type="text" placeholder="请输入原因">

            <div> ${num.count}您的订单正在分配中...请耐心等待      </div>
            <input type="hidden" value=${orders.adressId.id}>
            <div class="queding"><a href="<%=path%>/user/allrepairorder">确定取消</a></div>
            <div  class="add6"><a href="javascript:void(0)">取消订单</a></div>
            <div class="add7"><a href="javascript:void(0)" >查看订单</a></div>
            <div class="shouqi" id="shouqi"><a href="javascript:void(0)">收起</a></div>
            <input type="hidden" value="${orders.timeTableId}">

        </div>
        <div id="un" class="address">

        </div>
        <div id="un" class="time">
            时间
        </div>
        <div id=un class="infomation" >
            <div>联系电话:&nbsp;&nbsp;&nbsp;${orders.userinfoPhoneNumber}</div>
        </div>
        <div id="un" class="result">

          故障描述:&nbsp;&nbsp;&nbsp;${orders.describe}
        </div>
            <c:if test="${not empty orders.pic}">

        <div id="un" class="pic">

           <img id="photo1" src="<%=path%>/ysk/images/${orders.pic}">

        </div>
        </c:if>

        </c:forEach>




    <!-- 底部tabbar    start -->

    <nav class="mui-bar mui-bar-tab tabbar-bottom">
        <div class="mui-tab-item mui-active" >
            <span class="mui-icon"><a href="<%=path%>/shouye"><img src="<%=path%>/heatconfig/images/nav_home_on.png" /></a></span>
            <span class="mui-tab-label"><a href="<%=path%>/shouye">首页</a></span>
        </div>
        <div class="mui-tab-item" >
            <span class="mui-icon"><a href="<%=path%>/user/allrepairorder"><img src="<%=path%>/heatconfig/images/nav_hudong.png" /></a></span>
            <span class="mui-tab-label"><a href="<%=path%>/user/allrepairorder">订单进度</a></span>
        </div>
        <div class="mui-tab-item" >
            <span class="mui-icon"><img src="<%=path%>/heatconfig/images/nav_user.png" /></span>
            <span class="mui-tab-label"><a>我的</a></span>
        </div>
    </nav>

</body>
</html>
<script type="text/javascript">

    $(".add7").click(function () {
        $(this).next().css("display","block");
        $(this).css("display","none");
        $(this).parent().next().next().next().css("display","block");
        $(this).parent().next().css("display","block");
        $(this).parent().next().next().css("display","block");
        $(this).parent().next().next().next().next().css("display","block");
        $(this).parent().next().next().next().next().next().css("display","block");


        var orderid=$(this).prev().prev().prev().val();

        var that=$(this).parent().next()
    $.ajax({
            url:"<%=path%>/user/getorderaddress",
            data:{orderid:orderid},
            async:false,
            method:"post",
            success:function (mes) {

           that.html(mes)

            }
        })

        var timeid=$(this).next().next().val();

        var t=$(this).parent().next().next();
        $.ajax({
            url:"<%=path%>/user/getordertime",
            data:{timeid:timeid},
            async:false,
            method:"post",
            success:function (mes) {
                t.html(mes)


            }
        })

    })

    $(".shouqi").click(function () {
        $(this).prev().css("display","block");
        $(this).css("display","none");
        $(this).parent().next().next().next().css("display","none");
        $(this).parent().next().css("display","none");
        $(this).parent().next().next().css("display","none");
        $(this).parent().next().next().next().next().css("display","none");
        $(this).parent().next().next().next().next().next().css("display","none");
    })

</script>
<script type="text/javascript">
    $(".add6").click(function () {
            $(this).css("display","none");
            $(this).prev().css("display","block")
            $(this).prev().prev().prev().prev().css("display","block")
            $(this).prev().prev().prev().prev().select();



    })


    $(".queding").click(function () {
        $(this).css("display","none");
        $(this).next().css("display","block");
        $(this).prev().prev().prev().css("display","none")
        var result=$(this).prev().prev().prev().val();
        var orderid=$(this).prev().prev().prev().prev().val();

        $.ajax({
            url:"<%=path%>/user/refund",
            type:"post",
            async:false,
            data:{result:result,orderid:orderid},


        })



    })


</script>